<template>
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  :append-to-body="false"
	  width="450px"
	  class="editor-dialog"
	  @close="resetForm"
	  draggable
	  :close-on-click-modal="false"
	>
		<el-form
			ref="formRef"
			:model="formData"
			:rules="formRules"
			label-width="80px"
		>
			<el-form-item label="标识" prop="name">
				<el-input v-model="formData.name" placeholder="请输入标识" />
			</el-form-item>
		
			<el-form-item label="事件" prop="event">
				<el-select v-model="formData.event" popper-class="editor-select" placeholder="请选择"  style="width: 100%;">
				  <el-option
				    v-for="item in eventOptions"
				    :key="item.id"
				    :label="item.name"
				    :value="item.id"
				  />
				</el-select>
			</el-form-item>
			
			<el-form-item label="样式" prop="styleId">
				<el-select v-model="formData.styleId" popper-class="editor-select" clearable placeholder="请选择"  style="width: 100%;">
				  <el-option
				    v-for="item in styleOptions"
				    :key="item.id"
				    :label="item.code"
				    :value="item.id"
				  />
				</el-select>
			</el-form-item>
			
			<el-form-item label="状态" prop="enabled">
				<el-switch
					v-model="formData.enabled"
					inline-prompt
					active-text="启用"
					inactive-text="禁用"
					class="item"
				/>
			</el-form-item>
			
			<el-form-item label="联动" prop="actionId">
				<el-select v-model="formData.actionId" popper-class="editor-select" clearable placeholder="请选择"  style="width: 100%;">
				  <el-option
				    v-for="item in actionOptions"
				    :key="item.id"
				    :label="item.name"
				    :value="item.id"
				  />
				</el-select>
			</el-form-item>
			
			<el-form-item label="内置交互" prop="innerAction">
				<el-switch
					v-model="formData.innerAction"
					inline-prompt
					active-text="启用"
					inactive-text="禁用"
					class="item"
				/>
			</el-form-item>
			
			<el-form-item label="序号" prop="sort">
				<el-input-number
					v-model="formData.sort"
					controls-position="right"
				/>
			</el-form-item>
			
		</el-form>
	
		<template #footer>
		  <div class="dialog-footer">
			<el-button color="#7456E9" @click="submitForm"  :loading="loading">确 定</el-button>
			<el-button color="#1e1e1e"  @click="closeDialog" :loading="loading">取 消</el-button>
		  </div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	
	import {
	  saveActorEvent,getActorStylePage,getActorActions
	} from "@/api/wdp/actor";
	
	import {
	  getAssemblyEvents
	} from "@/api/wdp/assembly";
	

	import type {FormRules } from 'element-plus'
	import { useRoute } from 'vue-router'
	const route = useRoute();
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const formRef=ref();
	const formData=ref<any>({
		enabled:false,
		innerAction:false,
		sort:0,
	})
	
	const styleOptions=ref<any[]>([]);
	const actionOptions=ref<any[]>([]);
	const eventOptions=ref<any[]>([]);
	
	const formRules=reactive<FormRules>({
		name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
		event: [{ required: true, message: "事件不能为空", trigger: "blur" }],
	});
	
	async function openDialog(row?: any, type?: string) {
		
		formData.value.sceneId = route.query.id;
		formData.value.actorId =  row?row.actorId:'';
		formData.value.product =  row?row.product:'';
		
		loadEventOptions();
		loadStyleOptions();
		loadActionOptions();
		if('add'==type){
			dialog.value.visible=true;
			dialog.value.title='新增';
		}else{
			dialog.value.visible=true;
			dialog.value.title='编辑';
			formData.value.id = row.id;
			formData.value.actorId = row.actorId;
			formData.value.sceneId = row.sceneId;
			formData.value.event = row.event;
			formData.value.styleId = row.styleId;
			formData.value.actionId = row.actionId;
			formData.value.name = row.name;
			formData.value.enabled = Boolean(row.enabled);
			formData.value.innerAction = Boolean(row.innerAction);
			formData.value.sort =row.sort
		}
	}
	async function loadStyleOptions() {
	  getActorStylePage({actorId:formData.value.actorId}).then((response:any) => {
	  	styleOptions.value=response.data
	  });
	}
	async function loadActionOptions() {
	  getActorActions({id:formData.value.actorId}).then((response:any) => {
	  	actionOptions.value=response.data
	  });
	}
	
	async function loadEventOptions() {
	  getAssemblyEvents(formData.value.product).then((response:any) => {
	  	eventOptions.value=response.data
	  });
	}
	
	const submitForm=()=>{
		formRef.value.validate((isValid: boolean) => {
		  if (isValid) {
				loading.value=true;
				saveActorEvent(formData.value)
				.then((res:any) => {
					ElMessage.success(res.msg);
					closeDialog();
				})
				.catch((e:any) => {
					console.error(e)
				})
				.finally(() => {
					loading.value=false;
				});
		  }
		});
	}
	
	const emits = defineEmits(['closeDialog'])
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emits('closeDialog',formData)
		resetForm();
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
		formRef.value.resetFields();
		formRef.value.clearValidate();
		formData.value.id = undefined;
		formData.value.sceneId = undefined;
		formData.value.actorId = undefined;
		formData.value.styleId = undefined;
		formData.value.actionId = undefined;
		formData.value.event = undefined;
		formData.value.name = undefined;
		formData.value.enabled = false;
		formData.value.innerAction = false;
		formData.value.sort = 0;
	}	
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
	
</script>

<style scoped>
	.custom-dialog{
		background-color: rebeccapurple;
	}
	
	:deep(.avatar-uploader .el-upload) {
	  border: 1px dashed #ccc;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  width: 16rem;
	  height: 10rem;
	  
	}

	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 178px;
	  height: 178px;
	  text-align: center;
	}
	
	.thumbnail{
		height: 160px !important;
		width: 256px !important;
		-o-object-fit: fill;
		object-fit: fill;
	}
	
	.form-row{
		width: 100%;
		display: flex;
		flex-direction: row;
		padding-right: 0.625rem;;
	}
	
	:deep(.el-input-number__decrease) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	:deep(.el-input-number__increase) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
</style>